<!DOCTYPE html>
<html class="fillspace" xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title></title>
<link href="dojo/resources/dojo.css" rel="stylesheet" type="text/css"/>
<link href="dijit/themes/nihilo/nihilo.css" rel="stylesheet" type="text/css" />
<link href="lib/jrds.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
var dojoConfig = { parseOnLoad: false, isDebug: false, locale:'en-us', async: true };
</script>
<script type="text/javascript" src="dojo/dojo.js" ></script>
<script type="text/javascript" src="lib/jrds.js"></script>
<script type="text/javascript">
amdVector = [
	"dijit/layout/BorderContainer",
	"dijit/layout/ContentPane",
	"dijit/TitlePane"]
require(amdVector);

require([ "dojo", 
          "dojo/dom",
          "dojo/dom-construct",
          "dojo/_base/array",
          "dojo/on",
          "dojo/parser",
      	  "dojo/domReady!" ],
function(dojo, dom, domconstruct, array, on, parser) {
	initQuery();
	dojo.xhrGet( {
		url: "details?" + dojo.objectToQuery(queryParams),
		handleAs: "json",
		load: function(response, ioArgs) {
			document.title = response.probeinstancename + " on " + response.hostname;
			dom.byId('probequalifiedname').innerHTML = response.probequalifiedname;
			dom.byId('probename').innerHTML = response.probename;
			if(response.index != undefined) {
				dom.byId('index').innerHTML = response.index;
			}
			else {
				domconstruct.destroy(dom.byId('indexpane'));
			}
			ulds = dom.byId('datastores');
			array.forEach(response.datastores, function(ds) {
				console.log(ds);
				li = dojo.create("li", null, ulds, 'last');
				a = dojo.create("a", {href: "popup.html?pid=" + response.pid + "&dsName=" + ds.name}, li);
				a.innerHTML = ds.name;
				on(a, "click", function(event) {
					popup("pid=" + response.pid + "&dsName=" + ds.name, null);
					event.preventDefault();
				});
			});
			ulgraphs = dom.byId('graphs');
			array.forEach(response.graphs, function(graph) {
				li = dojo.create("li", null, ulgraphs, 'last');
				a = dojo.create("a", {href: "popup.html?id=" + graph.id}, li);
				a.innerHTML = graph.name;
				on(a, "click", function(event) {
					popup("id=" + graph.id, null);
					event.preventDefault();
				});
			});
			parser.parse();
		},
		error: function(response, ioArgs) {
			console.error(response);
		}
	});
})

</script>
</head>
<body class="nihilo fillspace">
	<div data-dojo-type="dijit/layout/BorderContainer" gutters="true" class="fillspace">
		<div data-dojo-type="dijit/layout/ContentPane" region="center">
			<div data-dojo-type="dijit/TitlePane" title="Probe instance name">
				<span id="probequalifiedname"></span>
			</div>
			<div id="indexpane" data-dojo-type="dijit/TitlePane" title="Index">
				<span id="index"></span>
			</div>
			<div data-dojo-type="dijit/TitlePane" title="Probe name">
				<span id="probename"></span>
			</div>
			<div data-dojo-type="dijit/TitlePane" title="Data stores">
				<ul id="datastores">
				</ul>
			</div>
			<div data-dojo-type="dijit/TitlePane" title="Graphs">
				<ul id="graphs">
				</ul>
			</div>
		</div>
	</div>
</body>
</html>
